<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="text-blue pointer text-center">
      <i class="fa fa-cubes text-lg" @click="getInfo"></i>
    </div>
    <el-dialog :visible.sync="showDetails" width="80%">
      <div slot="title">
        <span>出库计划详情</span>
        <span class="margin-lr-sm">{{ info.boxCount }}CTNS</span>
        <span class="margin-lr-sm">{{ info.actualWeight }}KG</span>
        <span class="margin-lr-sm">{{ info.grossVolume }}CBM</span>
      </div>
      <TableModule
        :table-columns="columns"
        :table-data="tableData"
        need-serial-number
      />
    </el-dialog>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
import TableModule from "../../components/TableModule";
export default {
  props: ["row", "data", "more"],
  components: {
    TableModule
  },
  data() {
    return {
      loading: false,
      showDetails: false,
      tableData: [],
      columns: [
        {
          prop: "waybillNo",
          label: "运单号"
        },
        {
          prop: "inStockActualWeight",
          label: "实重"
        },
        {
          prop: "inStockVolume",
          label: "体积"
        },
        {
          prop: "inStockChargedWeight",
          label: "计费重"
        },
        {
          prop: "inStockVolumeWeight",
          label: "体积重"
        },
        {
          prop: "inStockTotalPackages",
          label: "件数"
        },
        {
          prop: "inStockTime",
          label: "入库时间"
        },
        {
          prop: "status",
          label: "状态"
        },
        // {
        //   prop: "",
        //   label: "品名"
        // },
        {
          prop: "inStockChannel",
          label: "入库渠道"
        },
        {
          prop: "dispatchAddressCode",
          label: "仓库"
        },
        {
          prop: "provinceId",
          label: "邮编"
        },
        {
          prop: "label",
          label: "标签"
        },
        {
          prop: "channelCapacity",
          label: "渠道能力"
        },
        {
          prop: "isClearance",
          label: "是否报关",
          type: "boolean"
        },
        {
          prop: "storageLocation",
          label: "库位"
        },
        {
          prop: "customerId",
          label: "客户简称"
        }
      ],
      info: {}
    };
  },
  mounted() {
    // this.init();
    console.log("this.data :>> ", this.data);
    console.log("this.$store.state :>> ", this.$store.state.main.entry.sources);
  },
  methods: {
    async getInfo() {
      this.loading = true;
      const { code, data, data2 } = await ajax("findOutStockPlanDetails", {
        id: this.data.id
      });
      console.log("data :>> ", data);

      if (code === 200) {
        this.sortData(data, data2);
        this.info.boxCount = data2.boxCount;
        this.info.actualWeight = data2.actualWeight;
        this.info.grossVolume = Math.round(data2.grossVolume * 1000) / 1000;
      } else {
        this.$message.error("获取数据失败");
        this.loading = false;
      }
    },
    sortData(data, data2) {
      console.log("this.data :>> ", this.data);
      const arr = [];
      // TODO 转换map 数据
      for (let i of data) {
        const a = i.channelCapacity.split(",");
        let arr2 = [];
        for (let j of a) {
          j = this.$store.state.main.entry.sources.channelAbilitySource[j];
          arr2.push(j);
        }

        i.channelCapacity = arr2.join(",");
        i.inStockChannel = this.$store.state.main.entry.sources.instockChannelSource[
          i.inStockChannel
        ];
        i.customerId = this.$store.state.main.entry.sources.customerNameShortSource[
          i.customerId
        ];
        i.status = this.m(
          this.$store.state.main.entry.sources.waybillStatusSource[
            i.status
          ]
        );
        i.label = data2.endDeliveryLabelMap[i.waybillNo];
        arr.push(i);
      }
      this.tableData = arr;
      this.loading = false;
      this.showDetails = true;
    },
    m(k) {
      return m(k, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.padding-l-sm {
  padding-left: 2px;
}
</style>
